<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自定义指令</title>



</head>

<body>
    <div id="app">
        <button @click="num++">{{num}}</button>
        <!--  <button @click="doKill">kill</button>
        <button @click="isShow=!isShow">{{isShow}}</button> -->
        <!-- 使用自定义指令 加上v-前缀 -->
        <!-- <input type="text" v-focus="1+1"> -->
        <!-- <input type="text" v-focus.abc="num">
        <input type="text" v-focus.edit="num">
        <input type="text" v-focus.delete="num"> -->
        <!-- <input type="text" v-focus.foo.bar.baz="num"> -->
        <!-- <input type="text" v-focus:foo:bar:baz="num"> -->
        <input type="text" v-focus:[num]="num">
        <!-- 自定义组件中使用指令 -->
        <!-- <div v-color>根组件中的dom</div> -->
        <!-- <demo-comp v-if="isShow"></demo-comp>
        <div>hello</div>
        <p>world</p> -->
    </div>


    <!-- 引入vue -->
    <script src=" https://unpkg.com/vue@3/dist/vue.global.js">
    </script>
    <script>
        const { createApp, ref, reactive, toRefs, computed, getCurrentInstance } = Vue;
        // 创建Vue实例
        const app = createApp({
            setup() {
                const num = ref(1)
                const isShow = ref(true)
                const instance = getCurrentInstance()
                console.log("instance=>", instance);

                const doKill = () => {
                    instance.appContext.app.unmount()
                }
                return {
                    num,
                    doKill,
                    isShow
                }
            }

        })


        //全局注册 自定义指令
        // app.directive(指令名称,对象)
        app.directive('focus', {
            // 在绑定元素的 attribute 前
            // 或事件监听器应用前调用
            created(el, binding, vnode) {
                console.groupCollapsed('====created====')
                console.log("el=>", el) // el就是指令绑定的元素
                console.log("binding=>", binding) // 对象，包含指令相关信息
                console.log("vnode=>", vnode) //vue产生的 vnode虚拟节点
                console.groupEnd()
            },
            //在元素被插入到 DOM 前调用
            beforeMount(el, binding, vnode) {
                console.groupCollapsed('====beforeMount====')
                console.log("el=>", el) // el就是指令绑定的元素
                console.log("binding=>", binding) // 对象，包含指令相关信息
                console.log("vnode=>", vnode) //vue产生的 vnode虚拟节点
                console.groupEnd()
            },
            // 在绑定元素的父组件
            // 及他自己的所有子节点都挂载完成后调用
            mounted(el, binding, vnode) {
                console.groupCollapsed('====mounted====')
                console.log("el=>", el) // el就是指令绑定的元素
                console.log("binding=>", binding) // 对象，包含指令相关信息
                console.log("vnode=>", vnode) //vue产生的 vnode虚拟节点
                console.groupEnd()
                el.focus() // 获取焦点
                if (binding.modifiers.abc) { // 判断是否有abc修饰符
                    el.style.color = "red"
                }
                if (binding.modifiers.edit) {
                    // 显示编辑按钮
                }
                if (binding.modifiers.delete) {
                    // 显示删除按钮
                }
            }
            ,
            // 绑定元素的父组件更新前调用
            beforeUpdate(el, binding, vnode, preVnode) {
                console.groupCollapsed('====beforeUpdate====')
                console.log("el=>", el) // el就是指令绑定的元素
                console.log("binding=>", binding) // 对象，包含指令相关信息 
                console.log("vnode=>", vnode) //vue产生的 vnode虚拟节点
                console.log("preVnode=>", preVnode) //上一次的vnode虚拟节点
                console.groupEnd()
            },
            // 在绑定元素的父组件
            // 及他自己的所有子节点都更新后调用
            updated(el, binding, vnode, preVnode) {
                console.groupCollapsed('====updated====')
                console.log("el=>", el) // el就是指令绑定的元素
                console.log("binding=>", binding) // 对象，包含指令相关信息 
                console.log("vnode=>", vnode) //vue产生的 vnode虚拟节点
                console.log("preVnode=>", preVnode) //上一次的vnode虚拟节点
                console.groupEnd()
            },
            // 绑定元素的父组件卸载前调用
            beforeUnmount(el, binding, vnode) {
                console.groupCollapsed('====beforeUnmount====')
                console.log("el=>", el) // el就是指令绑定的元素
                console.log("binding=>", binding) // 对象，包含指令相关信息 
                console.log("vnode=>", vnode) //vue产生的 vnode虚拟节点
                console.groupEnd()
            },
            // 绑定元素的父组件卸载后调用
            unmounted(el, binding, vnode) {
                console.groupCollapsed('====unmounted====')
                console.log("el=>", el) // el就是指令绑定的元素
                console.log("binding=>", binding) // 对象，包含指令相关信息 
                console.log("vnode=>", vnode) //vue产生的 vnode虚拟节点
                console.groupEnd()
            }

        })

        // 获取随机颜色
        function getRandomColor() {
            var letters = '0123456789ABCDEF';
            var color = '#';
            for (var i = 0; i < 6; i++) {
                color += letters[Math.floor(Math.random() * 16)];
            }
            return color;
        }


        // 注册组件
        app.component('demo-comp', {
            setup() {

            },
            template: `
                <div v-color>自定义组件</div>
                
            `,
            // 局部注册自定义指令
            directives: {
                // 指令名称:{}
                color: {
                    mounted(el, binding, vnode) {
                        console.groupCollapsed('====局部注册自定义指令====')
                        console.log("el=>", el) // el就是指令绑定的元素
                        console.log("binding=>", binding) // 对象，包含指令相关信息
                        console.log("vnode=>", vnode) //vue产生的 vnode虚拟节点
                        console.groupEnd()
                        el.style.backgroundColor = getRandomColor()
                    },
                    // 绑定元素的父组件卸载前调用
                    beforeUnmount(el, binding, vnode) {
                        console.groupCollapsed('====局部注册自定义指令beforeUnmount====')
                        console.log("el=>", el) // el就是指令绑定的元素
                        console.log("binding=>", binding) // 对象，包含指令相关信息 
                        console.log("vnode=>", vnode) //vue产生的 vnode虚拟节点
                        console.groupEnd()
                    },
                    // 绑定元素的父组件卸载后调用
                    unmounted(el, binding, vnode) {
                        console.groupCollapsed('====局部注册自定义指令unmounted====')
                        console.log("el=>", el) // el就是指令绑定的元素
                        console.log("binding=>", binding) // 对象，包含指令相关信息 
                        console.log("vnode=>", vnode) //vue产生的 vnode虚拟节点
                        console.groupEnd()
                    }

                }
            }
        })


        // 挂载到dom
        app.mount('#app')
    </script>
</body>

</html>